Canvas、SVG 与嵌入媒体
Canvas
- 位图：脚本逐像素绘制（2D API / WebGL），放大可能模糊。
- 适用：游戏帧、大数据量可视化、频繁重绘画布。
- 特点：节点少，大量图形时常比海量 SVG DOM 更省布局成本；需自行处理高清屏时可配合
devicePixelRatio。
html
<canvas width="600" height="400" aria-label="图表"></canvas>SVG
- 矢量：XML 描述路径与形状，缩放清晰。
- 适用：图标、Logo、可交互图表、需 CSS/JS 操控单个图元的场景。
- 嵌入方式：内联
<svg>、img引用.svg、或object/iframe（按需求）。
取舍小结
| 维度 | Canvas | SVG |
|---|---|---|
| 缩放 | 位图，依赖分辨率 | 矢量清晰 |
| DOM | 单画布节点 | 多节点，复杂场景更重 |
| 事件 | 需自行命中检测 | 可对路径绑定事件 |
音视频（HTML5）
<audio>、<video> 支持 controls、src、多 source 格式、poster（视频封面）。格式与编码需注意浏览器授权策略（自动播放常需静音等）。
嵌入其它页面
iframe 用于嵌入第三方页面或沙箱内容；安全与性能需关注 同源策略、sandbox、referrerpolicy 等（跨文档通信见 06）。